<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
				</div>
				<div class="flex-end-center-wrap">
					<jk-select v-model="searchParams.workshopId" :clearable="false" :option-list="workshopList" placeholder="区域" class="search-bar-item-size1 margin-5-0 item-gap" @change="onWorkshopChange"></jk-select>
					<jk-select v-model="searchParams.workshopAreaId" :clearable="false" :option-list="workshopAreaList" placeholder="区域" class="search-bar-item-size1 margin-5-0 item-gap"></jk-select>
					<div class="search-bar-item-size2 item-gap">
						<el-date-picker v-model="searchParams.yearMonth" :clearable="false" size="small" style="width: 100%;" type="month" value-format="yyyy-MM" placeholder="月" />
					</div>
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>

		<jk-card>
			<el-table
				v-loading="tableLoading"
				:data="tableData"
				style="width: 100%"
				:height="tableHeight + 20"
				size="mini"
			>
				<el-table-column
					v-for="(item, index) in tableHeader"
					:key="index"
					:prop="item.key"
					:label="item.title"
					:align="['细纱产量', '自络产量', '日期'].includes(item.title) ? 'center': 'right'"
					min-width="150"
				>
					<el-table-column
						v-for="(childItem, childIndex) in item.scheduleGroupList"
						:key="childIndex"
						:prop="childItem.key"
						:label="childItem.title"
						align="right"
						min-width="120"
					></el-table-column>
				</el-table-column>
			</el-table>
		</jk-card>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import { pageConfig, formatDate, formatMonth } from '/src/utils/jk/jk-tool';
    import getMenuColumn from '../../../mixins/getMenuColumn';
    import handlerCache from '../../../mixins/handler-cache';
    import { spinWorkshopAreaPage } from '../../../api/basicData/workshopArea';
    import { reportAfterSpinningMonthData } from '../../../api/production/frontGroupYieldStatistics';

    export default {
        name: 'AfterSpinningMonthReport',
        components: {
        },
        mixins: [calHeight, getMenuColumn, handlerCache],
        data() {
            return {
                apiItem: {
                    'page': reportAfterSpinningMonthData
                },
                prefix: 'production:prdOrder',
                tableHeader: [],
                tableData: [],
                versionRecordDialogState: false,
                noticeStateList: [
                    { id: 0, name: '待核查' },
                    { id: 1, name: '已核查' }
                ],
                machineList: [
                    'LT001',
                    'LT002',
                    'LT003',
                    'LT004',
                    'LT005',
                    'LT006',
                    'LT007',
                    'LT008',
                    'LT009'
                ],
                dataId: null,
                workshopList: [],
                tableLoading: true,
                exportLoading: false,
                workshopAreaList: [],
                searchParams: {
                    deviceRecordNumber: '',
                    yearMonth: '',
                    workshopAreaId: null,
                    workshopId: 22
                }
            };
        },
        mounted() {
            this.getDependentData();
        },
        methods: {
            onWorkshopChange() {
                this.$set(this.searchParams, 'workshopAreaId', null);
                this.workshopAreaList = [];
                this.getWorkshopAreaListRequest();
            },
            onVisibleChange(e) {
                this.versionRecordDialogState = e;
            },
            clearCacheMethod() {
                // Object.assign(this.$data, this.$options.data());
                this.$nextTick(() => {
                    this.getDependentData();
                });
            },
            getWorkshopAreaListRequest() {
                if (!this.searchParams.workshopId) return false;
                return spinWorkshopAreaPage({ auditState: 1, workshopId: this.searchParams.workshopId }).then(res => {
                    if (res.data.status === 200) {
                        this.workshopAreaList = res.data.res;
                    }
                });
            },
            async getDependentData() {
                this.tableLoading = true;
                this.workshopList = this.$store.state.user.userWorkshop.workshopList;
                this.$set(this.searchParams, 'workshopId', this.$store.state.user.userWorkshop.defaultWorkshopId);
                this.$set(this.searchParams, 'yearMonth', formatMonth(Date.now()));
                await this.getWorkshopAreaListRequest();
                await this.getMenuColumnListRequest();
                await this.getListRequest();
                this.tableLoading = false;
            },
            onDetailBtn(row) {
                this.dataId = row.id;
                this.$toOtherRouter({
                    name: 'detailXsReport',
                    query: {
                        id: row.id
                    }
                });
            },
            /** 查询列表 */
            getListRequest() {
                if (this.searchParams.workshopId && this.searchParams.workshopAreaId && this.searchParams.yearMonth) {
                    this.tableLoading = true;
                    const params = { ...this.searchParams };
                    if (params.yearMonth) {
                        params.year = new Date(params.yearMonth).getFullYear();
                        params.month = new Date(params.yearMonth).getMonth() + 1;
                    }
                    return this.apiItem['page'](params).then(res => {
                        this.tableLoading = false;
                        if (res.data.status === 200) {
                            if (res.data.res) {
                                this.tableHeader = res.data.res.titleList || [];
                                this.tableData = res.data.res.monthDataList || [];
                            }
                        }
                    });
                }
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.searchParams.pageNo = 1;
                this.searchParams.count = 1;
                this.getListRequest();
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => {
                    return v[j];
                }));
            }
        }
    };
</script>
<style>
    .machine-group-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-left: solid 1px #eee;
        border-top: solid 1px #eee;
        width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 4px;
        flex-shrink: 0;
    }
</style>
